<template>
  <div :class="ns.b()">
    <div class="page-title">废矿物油综合利用规范企业</div>
    <div class="filter-wrapper">
      <span class="total-num">
        共计
        <sapn style="color: rgba(255, 89, 89, 1)">&nbsp;{{ totalNum }}&nbsp;</sapn>
        条
      </span>
    </div>
    <div class="table-wrapper">
      <vc-table
        :loading="loading"
        :tableData="tableData"
        :columns="columns"
        :total="totalNum"
        :pageSize="queryData.pageSize"
        v-model:pageNum="queryData.pageNum"
        :defaultSort="{ field: 'noticeDate', order: 'desc' }"
        @page-change="handleCurrentChange"
        @sort-change="sortChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNamespace } from 'vc/src/use';
import { useTable } from './useTable';
import { getData } from '../apis';
import { usePage } from '@/use/usePage';

const ns = /* hoist-static*/ useNamespace('wasteMineralOil');
defineOptions({ name: ns.b() });

const { queryData, tableData, columns } = useTable();

const { loading, run } = useRequest(getData, {
  defaultParams: [queryData],
  onSuccess: (res) => {
    totalNum.value = res.total;
    tableData.value = res.values;
  }
});

const { totalNum, handleCurrentChange, sortChange } = usePage(queryData, run);
</script>

<style lang="scss" scoped>
@import '../index.scss';

.table-wrapper {
  margin-top: 8px;
}
</style>
